<template>
  <el-card class="mainContainer" shadow="never">

    <div ref="searchRef">
      <el-form :inline="true" :model="formInline"
               v-show="showSearch"

               class="demo-form-inline animate__animated animate__fadeIn">
        <el-form-item label="用户名称：">
          <el-input v-model="formInline.user" placeholder="用户名称" clearable/>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="formInline.user" placeholder="昵称" clearable/>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select
              v-model="formInline.region"
              placeholder="Activity zone"
              clearable
          >
            <el-option label="Zone one" value="shanghai"/>
            <el-option label="Zone two" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
          <el-date-picker
              v-model="formInline.date"
              type="date"
              placeholder="Pick a date"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryTable">查询</el-button>
          <el-button type="info" @click="queryTable">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="margin-bottom-18"
            style="margin-left: 0;margin-right: 0"
            type="flex" justify="space-between">
      <el-col :span="1.5" style="padding: 0">
        <el-button
            type="primary"
            :icon="Message"
            size=small
            @click="UserDialog=true;UserDialogTitle='新建用户'"
        >新建用户
        </el-button>
        <el-button
            type="danger"
            plain
            :icon="Delete"
            :disabled="BatchDeleteAble"
            size="small"
        >批量删除
        </el-button>
      </el-col>

      <el-col :span="1.5" style="padding: 0">
        <RightToolbar :show-search="showSearch"
                      @updateShowSearch="updateShowSearch"
                      @queryTable="queryTable"/>
      </el-col>
    </el-row>


    <el-table :data="tableData" border
              :height=max_table_height
              @selection-change="handleSelectionChange"
              cell-class-name="custom_table_column"
              style="width: 100%">
      <el-table-column fixed type="selection" width="55" align="center"/>
      <el-table-column prop="avatar" label="头像" width="180"/>
      <el-table-column prop="name" label="昵称" width="180"/>
      <el-table-column prop="mobile" label="手机号"/>
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column prop="is_superuser" label="是否管理员"/>
      <el-table-column prop="user_type" label="角色"/>
      <el-table-column prop="last_login" label="最后登陆时间"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="drawer2 = true">详情</el-button>
          <el-button link type="primary" size="small">更多</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="10" class="margin-top-18"
            style="margin-left: 0;margin-right: 0"
            type="flex" justify="space-between">
      <el-col :span="1.5">
      </el-col>
      <el-col :span="1.5">
        <el-pagination
            layout="total, sizes, prev, pager, next "
            :page-sizes="[100, 200, 300, 600]"
            :total="1000"/>
      </el-col>
    </el-row>
  </el-card>


  <!--  新建/编辑框-->
  <el-dialog
      v-model="UserDialog"
      :title="UserDialogTitle"
      width="500"
      :before-close="UserDialogClose"
      :fullscreen="false"
  >

    <el-form :model="UserFormData" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="头像:">
            <!--            <userAvatar @saveAvatarSuccess="saveAvatarSuccess" :Avatar="Avatar"></userAvatar>-->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权限类型:">
            <el-select style="width: 100%;" v-model="UserFormData.permType" placeholder="权限类型">
              <el-option label="菜单" value="menu"/>
              <el-option label="按钮" value="button"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型:" v-show="UserFormDataShow.menuType">
            <el-select style="width: 100%;" v-model="UserFormData.menuType" placeholder="权限类型">
              <el-option label="一级菜单" value="one"/>
              <el-option label="二级菜单" value="two"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级菜单:" v-show="UserFormDataShow.parentMenu">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="UserDialogClose">取消</el-button>
        <el-button type="primary" @click="commitUserFormData">确定</el-button>
      </span>
    </template>
  </el-dialog>


  <el-drawer v-model="drawer2"
             size="600"
             direction="rtl">
    <template #header>
      <h4>用户详情</h4>

    </template>
    <template #default>
      <div>
        <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick">
          <el-tab-pane label="详情" name="first">

            <el-descriptions
                class="margin-top"
                :column="3"
                size="default"
                border>
              <!--              <template #extra>-->
              <!--                <el-button type="primary" size="small">编辑</el-button>-->
              <!--              </template>-->
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <!--                    <User/>-->
                    账号
                  </div>
                </template>
                <template #default>
                  张三
                </template>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <!--                      <Iphone/>-->
                    电话号码
                  </div>
                </template>
                18100000000
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <location/>
                    </el-icon>
                    Place
                  </div>
                </template>
                Suzhou
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <tickets/>
                    </el-icon>
                    Remarks
                  </div>
                </template>
                <el-tag size="small">School</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <office-building/>
                    </el-icon>
                    Address
                  </div>
                </template>
                No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="角色配置" name="second">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="Option A"/>
              <el-checkbox label="Option B"/>
              <el-checkbox label="Option C"/>
              <el-checkbox label="disabled" disabled/>
              <el-checkbox label="selected and disabled" disabled/>
              <el-checkbox label="Option A"/>
              <el-checkbox label="Option B"/>
              <el-checkbox label="Option C"/>
              <el-checkbox label="disabled" disabled/>
              <el-checkbox label="Option A"/>
              <el-checkbox label="Option B"/>
              <el-checkbox label="Option C"/>
              <el-checkbox label="disabled" disabled/>
            </el-checkbox-group>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>


</template>

<script setup>
//userIndex 用户
import RightToolbar from '@/components/RightToolbar/index.vue'
import {ref, reactive, onMounted, onUnmounted, nextTick, watch, watchEffect} from 'vue'
import {
  Message,
  Delete
} from '@element-plus/icons-vue'
import {ElMessageBox} from "element-plus";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import {getUsers} from "@/apis/user/user.js";
// import userAvatar from '@/components/userAvatar/index.vue'


const searchRef = ref(null)
const max_table_height = ref("calc(100vh - 350px)")

const update_max_table_height = () => {
  max_table_height.value = "calc(100vh - 250px - " + searchRef.value.clientHeight + "px)"
}

onMounted(() => {
  update_max_table_height();
  addEventListener("resize", update_max_table_height);
})
onUnmounted(() => {
  removeEventListener("resize", update_max_table_height);

})

let BatchDeleteAble = ref(true)
const handleSelectionChange = (selections) => {
  BatchDeleteAble.value = !selections.length
}

const showSearch = ref(true)
const updateShowSearch = () => {
  showSearch.value = !showSearch.value;
  nextTick(update_max_table_height);
}

let tableData = ref([])

onMounted(() => {
  queryTable()
})

const queryTable = () => {
  getUsers().then(res => {
    tableData.value = res.data.data
  })
}


const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const cellClassName = ({row, column, rowIndex, columnIndex}) => {
  console.log(row, column, rowIndex, columnIndex)
}
// ######  新建/编辑 页   ####
let UserDialog = ref(false)
const UserDialogTitle = ref('')


const UserFormData = reactive({
  permType: 'menu',
  menuType: 'one',
  parentMenu: '',
  icon: '',
  name: '',
  web_path: ' ',
  perms: '',
  sort: '',
  status: true,
})

const UserFormDataShow = reactive({
  menuType: true,
  parentMenu: true,
  icon: true,
  web_path: true,
})

watch(UserFormData, (value, oldValue, onCleanup) => {
})

const saveAvatarSuccess = (avatar)=> {
  UserFormData.avatar = avatar;
}


const UserDialogClose = () => {
  ElMessageBox.confirm('取消新建？')
      .then(() => {
        UserDialog.value = false;
        done()
      })
      .catch(() => {
        // catch error
      })
}

const commitUserFormData=()=>{

}


// ######  抽屉页   ####
const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref('rtl')
const radio1 = ref('Option 1')
const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

function cancelClick() {
  drawer2.value = false
}

function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
      .then(() => {
        drawer2.value = false
      })
      .catch(() => {
        // catch error
      })
}


const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const checkList = ref(['selected and disabled', 'Option A'])


</script>

<style lang="scss">
.cell-item {
  display: flex;
  align-items: center;
}

</style>
